<template>
  <div class="nav">
    <header class="nav-content">
      <div class="nav-left">
        <a href="/home">
          <img class="logo" src="../../../public/static/logo@3xrenew3.png">
        </a>
        <nav class="menu-list">
          <!-- <div :class="{active:route == '1'}" class="nav-item">资源</div> -->
          <RouterLink :class="{active:route == '1'}" class="nav-item "  to="/home" @click="route='1'"> 资源 </RouterLink>
          <RouterLink :class="{active:route == '2'}" class="nav-item" to="/discovery" @click="route='2'"> 课程 </RouterLink>
          <RouterLink :class="{active:route == '3'}" class="nav-item" to="/trainingRoom" @click="route='3'"> 练习室 </RouterLink>
          <span style="margin-left: 40px;" class="nav-item" @click="route='4'"> 交流 </span>
          <RouterLink :class="{active:route == '5'}" class="nav-item" to="/my" @click="route='5'"> 我的 </RouterLink>
        </nav>
      </div>
      <div  v-if="!userInfoStore.token" class="nav-right" >
        <a class="download" href="javascript:;"> <img src="https://rs.dance365.com/img/navigation_phone@2x.5834b2b6.png">下载APP</a>
        <el-button  size="default" round @click="">
          + 发布
        </el-button>
        <RouterLink  class="login" to="/login" @click="dialogFormVisible = true"> 登录 </RouterLink>
        <RouterLink  to="/logi" @click="dialogVisible = true"> 注册 </RouterLink>
      </div>

      <div v-else class="avatar">
               <el-tooltip
                  class="box-item"
                  effect="light"
                  slot#content=""
                  placement="bottom"
               >
                  <img
                     class="avat"
                     src="https://rs.dance365.com/default_head@3x.png?imageView2/0/w/200/h/1200/format/webp/ignore-error/1"
                     @click="toMycenter"
                  />
               </el-tooltip>
               <span @click="logout">退出登录</span>
            </div>

    </header>
  </div>
  <el-dialog v-model="dialogFormVisible" title="请登录" width="20%">
      <el-form ref="ruleFormRef" :rules="rules" :model="form">
         <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" prop="phone" ref="phone" />
         </el-form-item>
         <el-form-item label="密   码" prop="password">
            <el-input v-model="form.password" ref="password" />
         </el-form-item>
      </el-form>
      <template #footer>
         <span class="dialog-footer">
            <el-button @click="cancle">取消</el-button>
            <el-button type="primary" @click="LoginHandler"> 确定 </el-button>
         </span>
      </template>
   </el-dialog>
   <el-dialog v-model="dialogVisible" title="请注册" width="20%">
      <el-form ref="ruleFormRef" :rules="rules" :model="form" label-width="30%">
         <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" ref="phone" />
         </el-form-item>
         <el-form-item label="密   码" prop="password">
            <el-input v-model="form.password" ref="password" />
         </el-form-item>
         <el-form-item label="确认密码" prop="repassword">
            <el-input v-model="form.repassword" ref="repassword" />
         </el-form-item>
         <el-form-item label="验证码" prop="code">
            <el-input v-model="form.code" ref="code" />
            <el-button style="margin-top: 10px" @click="getCode">
               获取验证码
            </el-button>
         </el-form-item>
      </el-form>
      <template #footer>
         <span class="dialog-footer">
            <el-button @click="cancle">取消</el-button>
            <el-button type="primary" @click="register"> 确定 </el-button>
         </span>
      </template>
   </el-dialog>

</template>

<script lang="ts">

export default {
  name: "Nav",
}
</script>

<script setup lang="ts">
import { computed, onMounted, ref,reactive} from 'vue';
import { useRouter,RouterLink } from 'vue-router';
import { ElDialog, ElMessage, type FormInstance } from "element-plus";
import { useUserInfoStore } from "@/stores/userInfo";
import router from "@/router";

const route = ref('1')
const userInfoStore = useUserInfoStore();
const dialogFormVisible = ref(false);
const dialogVisible = ref(false);
const ruleFormRef = ref<FormInstance>();
const restForm = () => ({
  phone: "",
   password: "",
   repassword: "",
   code: "",
});
const form = ref(restForm());
//验证
const validatePassphone = (rule: any, value: any, callback: any) => {
   if (value === "") {
      callback(new Error("请输入正确的手机号"));
   } else {
      if (form.value.phone !== "") {
         if (!ruleFormRef.value) return;
         ruleFormRef.value.validateField("phone", () => null);
      }
      callback();
   }
};
const validatePasspassword = (rule: any, value: any, callback: any) => {
   if (value === "") {
      callback(new Error("请输入密码"));
   } else {
      if (form.value.password !== "") {
         if (!ruleFormRef.value) return;
         ruleFormRef.value.validateField("password", () => null);
      }
      callback();
   }
};

const validatePassrepassword = (rule: any, value: any, callback: any) => {
   if (value === "") {
      callback(new Error("请输入密码"));
   } else if (value !== form.value.password) {
      callback(new Error("两次密码不一致"));
   } else {
      callback();
   }
};
const validatePasscode = (rule: any, value: any, callback: any) => {
   if (value === "") {
      callback(new Error("请输入验证码"));
   } else {
      if (form.value.code !== "") {
         if (!ruleFormRef.value) return;
         ruleFormRef.value.validateField("code", () => null);
      }
      callback();
   }
};
const rules = reactive({
   phone: [{ validator: validatePassphone, trigger: "blur" }],
   password: [{ validator: validatePasspassword, trigger: "blur" }],
   repassword: [{ validator: validatePassrepassword, trigger: "blur" }],
   code: [{ validator: validatePasscode, trigger: "blur" }],
});
//点击登录确定
const LoginHandler = async () => {
   const { phone, password } = form.value;
   dialogFormVisible.value = false;
   try {
      await userInfoStore.login(form.value);
      form.value = restForm();
   } catch (error) {
      ElMessage.error("请求登陆失败");
   }
};
//点击注册
const register = async () => {
   dialogVisible.value = true;
   try {
      await userInfoStore.register(form.value);
      dialogVisible.value = false;
      form.value = restForm();
   } catch (error) {
      form.value = restForm();
      ElMessage.error("注册失败");
   }
};
//获取验证码
const getCode = async () => {
   try {
      let result = await userInfoStore.getCode(form.value.phone);
      form.value.code = result.data;
   } catch (error) {
      ElMessage.error("获取验证码失败");
   }
};

//点击取消
const cancle = () => {
   dialogFormVisible.value = false;
   dialogVisible.value = false;
   form.value.password = "";
   form.value.phone = "";
};
//点击头像跳转
const toMycenter=() => {
   router.push("/center/me_center")
}
//退出登录
const logout = async () => {
   try {
      await userInfoStore.Logout();

      localStorage.removeItem("TOKEN");
   } catch (error) {
      ElMessage.error("退出登录失败");
   }
};

</script>

<style scoped>

.nav {
  width: 100%;
  height: 60px;
  box-shadow: 4px 0 9px #c1c1c1
}

.nav .nav-content {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-content .nav-left {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 18px;
}

.nav-content .nav-left .logo {
  width: 128px;
  height: 30px;
  margin-right: 30px;
}

.nav-left .nav-item {
  padding: 12px 10px;
  margin-left: 40px;
}

.nav-left .nav-item:hover {
  color: #f93684;
}

.nav-left .nav-item.active {
  color: #f93684;
}

.nav-item:nth-of-type(1){
  margin-left: 0;
}

.nav-right .download {
  line-height: 60px;
  margin: 21px 30px 22px 0;
}

.nav-right .download img {
  position: relative;
  top: 3px;
}

.nav-right .login {
  padding: 10px;
}

.el-button {
  background-color: #f93684;
  color: #fff;
  font-size: 16px;
  margin-right: 20px;
}
.el-icon {
  color: #fff;
}

.avatar {
width: 80px;
height: 30px;
cursor: pointer;
}
.avatar .avat {
width: 30px;
height: 30px;
}
.avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
}


</style>